<template>
  <view
    ><uni-load-more
      v-show="emptyShowIf"
      :status="emptyShowIf == true ? 'loading' : 'more'"
  /></view>

  <view v-show="!emptyShowIf" class="container">
    <view class="author">
      <!-- <u-avatar :src="authorInfo.avatarUrl" size="35"></u-avatar> -->
      <u-image
        width="35px"
        height="35px"
        :src="authorInfo.avatarUrl"
        shape="circle"
      ></u-image>
      <p class="authorName">{{ authorInfo.nickName }}</p>
      <u-tag
        class="tag"
        :text="tagText"
        :type="tagType"
        shape="circle"
        size="default"
        @click="tagClick()"
      />
    </view>
    <u-swiper
      :list="articleInfo.image"
      autoplay="false"
      :effect3d="true"
      height="600"
      img-mode="aspectFit"
      border-radius="10"
      bg-color="#fff"
    ></u-swiper>
    <view class="articlePart">
      <view class="articleTitle">
        {{ articleInfo.title }}
      </view>
      <view class="articleContent">
        {{ articleInfo.content }}
      </view>
      <view class="articleUpdateTime">编辑于 {{ articleInfo.updateAt }}</view>
    </view>
    <u-divider :use-slot="false" half-width="350"></u-divider>

    <view class="releaseView">
      <u-image
        width="60rpx"
        height="60rpx"
        :src="userAvatar"
        shape="circle"
        style="margin-right: 10rpx"
      ></u-image>
      <view style="width: 90%; height: 60rpx"
        ><u-input
          v-model="releaseView"
          type="text"
          border="true"
          placeholder="说点什么吧，万一火了呢～"
          @confirm="confirm(releaseView)"
      /></view>
    </view>

    <view v-show="noneViewShow" class="noneView">
      <u-image
        v-show="noneViewShow"
        width="300rpx"
        height="300rpx"
        src="https://wx1.sinaimg.cn/mw2000/0074C7s5gy1h7d088rj9oj3050050gle.jpg"
        shape="circle"
      ></u-image>
      <p v-show="noneViewShow">暂时还没有评论，快来发表吧～</p>
    </view>

    <view class="comments-container">
      <view
        v-for="(comment, index) in articleViews"
        :key="index"
        class="comment"
      >
        <view class="comment-avatar">
          <u-image
            width="35px"
            height="35px"
            :src="userAvatar"
            shape="circle"
          ></u-image>
        </view>
        <view class="comment-content">
          <view class="comment-main">
            <p class="comment-author-name">{{ userName }}</p>
            <p class="comment-text">{{ comment.text }}</p>
          </view>
          <p class="comment-time">{{ comment.time }}</p>
        </view>
      </view>
    </view>
    <div class="line">
      <u-divider v-show="!noneViewShow">THE END</u-divider>
    </div>
    <view style="min-height: 70rpx"></view>
  </view>
</template>

<script setup lang="ts">
import { ref, reactive, watch } from 'vue'
import { getArticle, addCommentsFn } from '../../utils/modules/article.js'
const props = defineProps({
  id: {
    type: String,
    default: '',
  },
})

const articleInfo: any = ref({})
const authorInfo = ref({})
const userAvatar = ref('')
const userName = ref('')
userAvatar.value = uni.getStorageSync('avatar')
userName.value = uni.getStorageSync('nickName')

const releaseView = ref('')
const articleViews = ref([
  {
    text: '这是第一条评论',
    time: '1小时前',
    replies: [], // 添加这个数组来存储回复
  },
  {
    text: '这是第二条评论',
    time: '2小时前',
    replies: [],
  },
  // 更多评论...
])

const noneViewShow = ref(true)

const emptyShowIf = ref(true)
//获取界面文章信息
const getArticleInfo = () => {
  getArticle({
    articleId: props.id,
  }).then((res) => {
    articleInfo.value = res.data.article[0]
    console.log(articleInfo.value, '------articleInfo')
    authorInfo.value = {
      nickName: articleInfo.value.authorName,
      avatarUrl: articleInfo.value.authorAvatarUrl,
    }
    emptyShowIf.value = false
    articleViews.value = articleInfo.value.comments
  })
}
getArticleInfo()
const tagType = ref('info')
const tagText = ref('已关注')
function tagClick() {
  tagType.value = tagType.value == 'info' ? 'error' : 'info'
  tagText.value = tagText.value == '已关注' ? '关注 +' : '已关注'
}

const loading = ref(true)
function confirm(releaseWord) {
  if (releaseWord.trim() !== '') {
    // 获取当前时间作为评论时间
    const now = new Date()
    const timeString = `${now.getFullYear()}-${
      now.getMonth() + 1
    }-${now.getDate()} ${now.getHours()}:${now.getMinutes()}`

    // 添加新评论到数组的开头
    articleViews.value.unshift({
      text: releaseWord.trim(),
      time: timeString, // 使用当前时间字符串
    })

    // 清空输入框
    releaseView.value = ''
    noneViewShow.value = false
  }
}

const currentReplyIndex = ref(-1) // 当前正在回复的评论的索引
const currentReplyText = ref('') // 用户输入的回复文本
function replyToComment(commentIndex, replyText) {
  // 确保回复文本不为空
  if (replyText.trim() === '') {
    uni.showToast({
      title: '回复内容不能为空',
      icon: 'none',
      duration: 2000,
    })
    return
  }

  // 获取当前时间作为回复时间
  const now = new Date()
  const timeString = `${now.getFullYear()}-${
    now.getMonth() + 1
  }-${now.getDate()} ${now.getHours()}:${now.getMinutes()}`

  // 创建回复对象
  const reply = {
    text: replyText.trim(),
    time: timeString,
  }

  // 检查被回复的评论是否有`replies`数组，如果没有，则初始化它
  if (!articleViews.value[commentIndex].replies) {
    articleViews.value[commentIndex].replies = []
  }

  // 将回复添加到被回复评论的`replies`数组中
  articleViews.value[commentIndex].replies.push(reply)

  // 可能需要更新UI或执行其他操作
}

setTimeout(() => {
  // getTime()
  loading.value = false
}, 1000)

watch(
  () => articleViews.value.length,
  (value, oldValue) => {
    if (value > 0 && noneViewShow.value == true) {
      noneViewShow.value = false
    }
  },
  { immediate: true },
)
</script>

<style lang="scss">
.container {
  // background-color: #eee;
  .author {
    // background-color: #eee;
    padding: 25rpx;
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    .authorName {
      display: flex;
      justify-content: center;
      margin-left: 15rpx;
      font-size: 30rpx;
      font-weight: 400;
    }
    .tag {
      margin-left: 340rpx;
      font-size: 40rpx;
    }
  }
  .articlePart {
    padding: 30rpx;
    // height: auto;

    .articleTitle {
      font-weight: 600;
      font-size: 40rpx;
      width: 100%;
      display: -webkit-box;
      -webkit-line-clamp: 2;
      -webkit-box-orient: vertical;
      overflow: hidden;
      line-height: 70rpx;
      margin-bottom: 10rpx;
    }
    .articleContent {
      // margin-top: 20rpx;
      font-weight: 400;
      font-size: 35rpx;
      width: 100%;
    }
    .releaseView {
      margin-top: 20rpx;
      margin: 15rpx;
      display: flex;
      flex-direction: row;
      margin-bottom: 100rpx;
    }
    .noneView {
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
      // min-height: 150rpx;
      margin-top: -60rpx;
      margin-bottom: 20rpx;
    }
    .view {
      margin-top: 20rpx;
      .viewPartWords {
        max-width: 600rpx;
        font-size: 25rpx;
        font-weight: 600;
        table-layout: fixed;
      }
    }
    .articleUpdateTime {
      margin-top: 15rpx;
      font-size: 20rpx;
      display: flex;
      // font-weight: 400;
      color: grey;
      justify-content: flex-end; // Add this line to align the element to the right
    }
  }
  .releaseView {
    // margin-top: 20rpx;
    margin: 15rpx;
    display: flex;
    flex-direction: row;
    margin-bottom: 100rpx;
  }
  .noneView {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    // min-height: 150rpx;
    margin-top: -60rpx;
    margin-bottom: 20rpx;
  }
  .view {
    // margin-top: 20rpx;
    .viewPartWords {
      max-width: 600rpx;
      font-size: 25rpx;
      font-weight: 600;
      table-layout: fixed;
      word-wrap: break-all;
      word-break: normal;
      white-space: normal;
    }
  }
}

/* ...其他不变的样式... */

.comments-container {
  display: flex;
  flex-direction: column;
}

.comment {
  display: flex;
  padding-left: 30rpx;
  padding-right: 30rpx;
  align-items: center; /* 使头像和内容垂直居中对齐 */
}

.comment-avatar {
  margin-right: 0rpx; /* 头像和评论内容之间的间隔 */
}

.comment-content {
  flex-grow: 1; /* 使评论内容填充剩余空间 */
  display: flex;
  justify-content: space-between;
  position: relative; /* 添加这一行 */
  margin: 20rpx; /* 添加这一行 */
  margin-bottom: 30rpx; /* 添加这一行 */
  flex-wrap: wrap;
  word-break: break-all;
}

.comment-main {
  display: flex;
  flex-direction: column;
}

.comment-author-name {
  font-weight: bold;
}

.comment-text {
  color: #333; /* 评论文字颜色 */
}

.comment-time {
  color: #999; /* 评论时间颜色 */
  font-size: 20rpx;
  position: absolute; /* 添加这一行 */
  right: 0; /* 添加这一行 */
  bottom: -35rpx; /* 添加这一行 */
}

/* ...其他不变的样式... */
</style>
